//

import ApiAcceptance from "@/api/acceptance";
import ByButton from "@/components/ui/ByButton";
import ByCell from "@/components/ui/ByCell";
import ByCol from "@/components/ui/ByCol";
import ByIcon from "@/components/ui/ByIcon";
import ByPopupBottom, {
  ByPopupBottomEvent,
} from "@/components/ui/ByPopupBottom";
import ByRadio from "@/components/ui/ByRadio";
import ByRow from "@/components/ui/ByRow";
import useForm from "@/hooks/useForm";
import { Input, Picker, Text, View } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useMount } from "ahooks";
import { useState } from "react";

export default ({
  source,
  defultModel,
  onCancel,
}: { source: any[]; defultModel: any } & ByPopupBottomEvent) => {
  const [data, setData] = useState({ pass: 0, unpass: 0, unwrite: 0 });

  useMount(() => {
    let pass = 0;
    let unpass = 0;
    let unwrite = 0;

    source.forEach((item) => {
      const option = item.options.find((e) => e.isCheck);
      if (!option) {
        unwrite++;
      } else if (option.isQualified) {
        pass++;
      } else {
        unpass++;
      }
    });

    const questionTemplate = source.map((e) => {
      return {
        ...e,
        quesTempID: e.quesId,
        options: e.options.map((e) => ({ ...e, optionsTempId: e.optionsId })),
      };
    });

    model.quesList[0].questionTemplate = questionTemplate;

    model.isPicture =
      questionTemplate.filter((e) => e.picList?.length > 0).length > 0;

    setData({
      pass,
      unpass,
      unwrite,
    });
  });

  const { loading, model, setModel, submit } = useForm(
    ApiAcceptance.acceptanceSubmit,
    {
      defaultModel: {
        ...defultModel,
        nextAcceptDate: "",
        state: 99,
      },
      onSuccess() {
        Taro.showToast({ title: "提交成功！" });
        setTimeout(() => {
          Taro.navigateBack({ delta: 1 });
        }, 1500);
      },
    }
  );

  // 确认提交
  const handleSubmit = async () => {
    if (model.state === 0 && !model.nextAcceptDate) {
      Taro.showToast({ icon: "none", title: "请选择下次验收时间" });
      return;
    }

    const { confirm } = await Taro.showModal({ title: "确定本次操作吗？" });
    confirm && submit();
  };

  return (
    <ByPopupBottom
      title="验收确认"
      slotFooter={
        <View className="p-3">
          <ByButton
            className="w-2/3"
            size="large"
            loading={loading}
            disabled={model.state === 99}
            onClick={handleSubmit}
          >
            通过
          </ByButton>
        </View>
      }
      onCancel={onCancel}
    >
      <View className="p-3">
        <ByRow className="p-4 text-center mb-3 bg-page rounded-md">
          <ByCol span={3}>
            <View className="mb-2 text-sm text-second">总数</View>
            <Text>
              {source.length} <Text className="text-xs"> 项</Text>
            </Text>
          </ByCol>
          <ByCol span={3}>
            <View className="mb-2 text-sm text-second">合格</View>
            <Text>
              {data.pass} <Text className="text-xs"> 项</Text>
            </Text>
          </ByCol>
          <ByCol span={3}>
            <View className="mb-2 text-sm text-second">不合格</View>
            <Text>
              {data.unpass}

              <Text className="text-xs"> 项</Text>
            </Text>
          </ByCol>
          <ByCol span={3}>
            <View className="mb-2 text-sm text-second">未答</View>
            <Text>
              {data.unwrite} <Text className="text-xs"> 项</Text>
            </Text>
          </ByCol>
        </ByRow>

        <View className="bg-page rounded-md px-3 mb-7">
          <ByCell label="验收结果" labelWidth="6em">
            <ByRadio
              checked={model.state === 1}
              className="mr-3"
              onChange={() => setModel({ state: 1 })}
            >
              通过
            </ByRadio>

            <ByRadio
              checked={model.state === 0}
              className="mr-3"
              onChange={() => setModel({ state: 0 })}
            >
              不通过
            </ByRadio>
          </ByCell>

          {model.state === 0 && (
            <Picker
              value={model.nextAcceptDate}
              mode="date"
              onChange={({ detail }) =>
                setModel({
                  nextAcceptDate: detail.value,
                })
              }
            >
              <ByCell
                border
                requierd
                label="下次验收"
                labelWidth="6em"
                nextIcon={<ByIcon name="Calendar" />}
              >
                <Input
                  value={model.nextAcceptDate}
                  disabled
                  placeholder="请选择时间"
                />
              </ByCell>
            </Picker>
          )}
        </View>
      </View>
    </ByPopupBottom>
  );
};
